<template>
  <!-- 编辑论文的对话框 ********************************** -->
  <el-dialog
    title="编辑专利"
    :visible.sync="editDialogVisible"
    width="80%"
    @close="handlePatentEditDialogClose"
    center
  >
    <span>
      <el-row :gutter="20">
        <el-col :span="14"
          ><div class="grid-content bg-purple">
            <el-form
              ref="patentEditFormRef"
              :model="patentEditForm"
              :rules="patentEditFormRules"
              label-width="130px"
              size="mini"
            >
              <!-- 专利名称 -->
              <el-form-item label="专利名称" prop="name">
                <el-input
                  placeholder="请输入专利名称"
                  v-model="patentEditForm.name"
                ></el-input>
              </el-form-item>
              <!-- 发明人 -->
              <el-form-item label="发明人" prop="inventor">
                <el-input
                  @input="inventorInputChange"
                  placeholder="多名专利者使用逗号分隔"
                  v-model="patentEditForm.inventor"
                ></el-input>
              </el-form-item>
              <!-- 发明人类型 -->
              <el-form-item label="发明人类型" prop="inventor_type">
                <el-input
                  placeholder="请输入发明人类型"
                  v-model="patentEditForm.inventor_type"
                ></el-input>
              </el-form-item>
              <!-- 专利所属单位 -->
              <el-form-item label="专利所属单位" prop="unit">
                <el-select
                  v-model="patentEditForm.unit"
                  placeholder="请选择作者所属单位"
                >
                  <el-option
                    v-for="item in collegeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <!--专利类型 -->
              <el-form-item label="专利类型" prop="patent_type"
                ><el-input
                  placeholder="请输入专利类型"
                  v-model="patentEditForm.patent_type"
                ></el-input>
              </el-form-item>
              <!--专利范围 -->
              <el-form-item label="专利范围" prop="patent_scope"
                ><el-select
                  v-model="patentEditForm.patent_scope"
                  placeholder="请选择作者所属单位"
                >
                  <el-option
                    v-for="item in patent_scopeOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <!--授权专利号 -->
              <el-form-item label="授权专利号" prop="authorized_patent_no"
                ><el-input
                  placeholder="请输入专利类型"
                  v-model="patentEditForm.authorized_patent_no"
                ></el-input>
              </el-form-item>
              <!--授权时间 -->
              <el-form-item label="授权时间" prop="authorization_time">
                <el-col :span="11">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="patentEditForm.authorization_time"
                    style="width: 100%"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-col>
              </el-form-item>
              <!--专利申请号 -->
              <el-form-item label="专利申请号" prop="apply_no"
                ><el-input
                  placeholder="请输入专利类型"
                  v-model="patentEditForm.apply_no"
                ></el-input>
              </el-form-item>
              <!--申请时间 -->
              <el-form-item label="申请时间" prop="apply_time">
                <el-col :span="11">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="patentEditForm.apply_time"
                    style="width: 100%"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-col>
              </el-form-item>
              <!-- 学科分类 -->
              <el-form-item label="学科分类" prop="subject_classification">
                <!-- options是数据 -->
                <el-cascader
                  placeholder="请选择学科分类"
                  v-model="subject_classificationVal"
                  :options="subject_classificationList"
                  :props="{ expandTrigger: 'hover' }"
                  @change="handleSubject_classificationChange"
                ></el-cascader>
              </el-form-item>
              <el-form-item label="备注" prop="remarks">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  v-model="patentEditForm.remarks"
                >
                </el-input>
              </el-form-item>
            </el-form></div
        ></el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-upload
              ref="patentfileUploadRef"
              :auto-upload="false"
              drag
              action="http://localhost:3000/patent/edit/upload"
              method="post"
              :on-change="checkType"
              :on-success="uploadSuccess"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
              <div class="el-upload__tip" slot="tip">
                只能上传.pdf/.png/.jpg文件，且不超过100mb
              </div>
            </el-upload>
          </div></el-col
        >
      </el-row>
    </span>
    <!-- 底部区域 -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="editDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handlePatentEditDialogConfirm"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "myEditPatent",
  props: [],
  data() {
    return {
      editDialogVisible: false,
      // 编辑项目数据
      patentEditForm: {},
      // 添加表单的验证规则对象
      patentEditFormRules: {},
      subject_classificationVal: [],
      // 专利范围
      patent_scopeOption: [],
    };
  },
  methods: {
    patentEditDialogVisibleShow(data) {
      this.editDialogVisible = !this.editDialogVisible;
      // 表数据
      // 学科
      // 学院
      this.patentEditForm = data;
      // 同步学科分类
      try {
        let subject_classification = data.subject_classification.split("-");

        this.subject_classificationList.forEach((item) => {
          if (item.label === subject_classification[0]) {
            item.children.forEach((child) => {
              if (child.label === subject_classification[1]) {
                this.subject_classificationVal = [item.value, child.value];
                throw new Error("forEach end");
              }
            });
          }
        });
      } catch (err) {}
    },
    handlePatentEditDialogClose() {
      this.$bus.$emit("handleGetPatentList");
    },
    // 学科分类选择事件
    handleSubject_classificationChange(val) {
      this.subject_classificationList.forEach((item) => {
        if (item.value == val[0]) {
          item.children.forEach((child) => {
            if (child.value == val[1]) {
              this.$set(
                this.patentEditForm,
                "subject_classification",
                `${item.label}-${child.label}`
              );
            }
          });
        }
      });
    },
    // 监听专利作者input改变事件
    inventorInputChange() {
      // 先变成数组 寻找到中文逗号改变成为英文逗号
      let cacheData = this.patentEditForm.inventor.split("");
      // console.log(cacheData.indexOf("a"));
      cacheData.forEach((item, index) => {
        if (item === "，") {
          // console.log(item);
          cacheData[index] = ",";
        }
      });
      this.patentEditForm.inventor = cacheData.join("");
      // console.log(this.patentEditForm.inventor);
    },
    // 编辑表单确认上传
    handlePatentEditDialogConfirm() {
      this.$refs.patentEditFormRef.validate(async (valid) => {
        if (!valid) return;
        if (!this.isUploadFile) return this.$message.warning("请上传文件");
        // 可以发起添加专利的网络请求
        const { data: res } = await this.$axios.post("/patent/edit", {
          patentEditForm: this.patentEditForm,
        });

        if (res.status == 100) {
          return this.$refs.patentfileUploadRef.submit();
        } else {
          return this.$message.error(res.message);
        }
      });
    },
    // 专利上传检查
    checkType(file, fileList) {
      let fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
      fileList = [];

      if (!(fileType != "pdf" || fileType != "jpg" || fileType != "png")) {
        this.$message.error("文件格式不正确");
        return false;
      }
      if (file.size / 1024 / 1024 > 20) {
        this.$message.error("文件大小不能超过52M");
        return false;
      }
      this.isUploadFile = true;
    },
    uploadSuccess() {
      this.$message.success("添加成功！");
      // 隐藏添加专利的对话框
      this.editDialogVisible = false;
      this.$refs.patentEditFormRef.resetFields();

      // 重新获取专利列表数据
      this.$bus.$emit("getAchievementList");
    },
  },
  mounted() {
    this.$bus.$on(
      "handleIsPatentEditDialogVisibleShow",
      this.patentEditDialogVisibleShow
    );
  },
  beforeCreate() {
    this.$bus.$off("handleIsPatentEditDialogVisibleShow");
  },
  computed: {
    ...mapState([
      "subject_classificationList",
      "collegeList",
      "publish_scopeOptions",
    ]),
  },
};
</script>

<style lang="less" scoped>
/deep/.el-dialog {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}
</style>